<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="dbOperator.*,java.sql.*"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link
	href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"
	rel="stylesheet">
<style type="text/css">
	body {
	overflow: auto !important;
	} 
	.modal{ 
	overflow: auto !important;
	} 
</style>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript">
//判断输入值错误
function checkEmail(email)
{    
  var str=email.value;
  if(str.indexOf("@") == -1)
  {
    alert('Please input email correctly!');
    return false;
  }
  return true;
} 
function checkLength(phoneNumber)
{    
  var str=phoneNumber.value;
  var length=str.length;
  if(length != 11)
  {    
    alert('Please input phoneNumber correctly!');  
    return false;
  }
  return true;
}
function checkNull(input){
	var str=input.value;
	if(str.length==0){
		return false;
	}
	return true;
}
function submitCheck(em,pn,formName,servletName) {
	var email=document.getElementById(em);	
	var phoneNumber=document.getElementById(pn);
	var flag=checkEmail(email);
	var flag2=checkLength(phoneNumber);
	if(flag==false||flag2==false){
		return;
	}
	ajaxSubmit(formName,servletName);
}
function submitCheckNull2(formName,servletName) {
	var input1=document.getElementById('abba');
	var flag=checkNull(input1);
	if(flag==false){
		alert("Input can't be null!");
		return;
	}
	ajaxSubmit2(formName,servletName);
}
function submitCheckNull3(formName,servletName) {
	var input1=document.getElementById('abwi1');
	var input2=document.getElementById('abwi2');
	var input3=document.getElementById('abwi3');
	var input4=document.getElementById('abwi4');
	var input5=document.getElementById('abwi5');
	var flag1=checkNull(input1);
	var flag2=checkNull(input2);
	var flag3=checkNull(input3);
	var flag4=checkNull(input4);
	var flag5=checkNull(input5);
	if(flag1==false||flag2==false||flag3==false||flag4==false||flag5==false){
		alert("Input can't be null!");
		return;
	}
	ajaxSubmit2(formName,servletName);
}
function submitCheckNull4(formName,servletName) {
	var input1=document.getElementById('category');
	var input2=document.getElementById('price');
	var flag1=checkNull(input1);
	var flag2=checkNull(input2);
	if(flag1==false||flag2==false){
		alert("Input can't be null!");
		return;
	}
	ajaxSubmit2(formName,servletName);
}
function submitCheckNull5(formName,servletName) {
	var input1=document.getElementById('asb1');
	var input2=document.getElementById('asb2');
	var flag1=checkNull(input1);
	var flag2=checkNull(input2);
	if(flag1==false||flag2==false){
		alert("Input can't be null!");
		return;
	}
	ajaxSubmit3(formName,servletName);
}
//回车提交表单
function pressEnter(submitButton) {
 	    if (event.keyCode == 13) {
 	            document.getElementById(submitButton).click();
 	    }
 	}
//page 2
//eRf aRf dRf
function ajaxSubmit(formName,servletName) {
$.ajax({
        type: "POST",//方法
        url: servletName,//表单接收url
        data: $(formName).serialize(),
        success: function () {
        	loadXMLDoc();
        	alert("success!");
        },
        error : function() {
        	alert("fail!");
        }
    });
}
function loadXMLDoc() {
	var xmlhttp;
	if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	} else {// code for IE6, IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}

	xmlhttp.onreadystatechange = function() {

		if (xmlhttp.readyState == 1) {
            document.getElementById("search").disabled=true;
			document.getElementById("search").innerHTML = "please wait...";
		}

		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("search").disabled=false;
			document.getElementById("search").innerHTML = "Search";
			document.getElementById("showreader").innerHTML = xmlhttp.responseText;
		}
	}
	xmlhttp.open("POST", "http://localhost:8080/library/SearchReader.do",
			true);
	xmlhttp.setRequestHeader("Content-type",
			"application/x-www-form-urlencoded");
	//将字符串发往后端
	xmlhttp.send("types=" + document.getElementById("types").value
			+ "&searchinfo=" + document.getElementById("searchinfo").value);
}
function editReader(id) {
	var str = id.name;
	str = str.substring(3);
	var ema = document.getElementById('ema' + str).innerHTML;
	var pho = document.getElementById('pho' + str).innerHTML;
	document.getElementById('Email').value=ema;
	document.getElementById('PhoneNumber').value=pho;
	document.getElementById('eUID').value=str;
	document.getElementById('eUIDforUI').innerHTML = str;
}
function deleteReader(id) {
	var str = id.name;
	str = str.substring(3);
	document.getElementById('dUID').value=str;
	document.getElementById('dUIDforUI').innerHTML = str;
}
function displayInfo(id){
		var rid = id.innerHTML;
		loadInfo(rid);
	}
	
	function loadInfo(rid) {
		var xmlhttp;
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = function() {

			if (xmlhttp.readyState == 1) {
				document.getElementById("info").innerHTML = "searching......";
			}

			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				document.getElementById("info").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("POST", "http://localhost:8080/library/readerinfo",
				true);
		xmlhttp.setRequestHeader("Content-type",
				"application/x-www-form-urlencoded");
		//将字符串发往后端
		xmlhttp.send("rid=" + rid);
	}
//page 3
//aBbaf aBf eBf
function ajaxSubmit2(formName,servletName) {
$.ajax({
        type: "POST",//方法
        url: servletName,//表单接收url
        data: $(formName).serialize(),
        success: function () {
        	loadXMLDoc2();
        	alert("success!");
        },
        error : function() {
        	alert("fail!");
        }
    });
}
function loadXMLDoc2() {
		var xmlhttp;
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}

		xmlhttp.onreadystatechange = function() {

			if (xmlhttp.readyState == 1) {
                document.getElementById("search2").disabled=true;
				document.getElementById("search2").innerHTML = "please wait...";
			}

			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("search2").disabled=false;
				document.getElementById("search2").innerHTML = "Search";
				document.getElementById("showbook").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("POST", "http://localhost:8080/library/SearchBook.do",
				true);
		xmlhttp.setRequestHeader("Content-type",
				"application/x-www-form-urlencoded");
		//将字符串发往后端
		xmlhttp.send("types2=" + document.getElementById("types2").value
				+ "&searchinfo2=" + document.getElementById("searchinfo2").value);
	}
	function gengrateBarcode(txt) {
		var ISBN = txt.innerHTML;
		ISBN = ISBN.replace(/-/g, "");
		var barCodePic = document.getElementById('barcode');
		barCodePic.setAttribute("src",
				'https://barcode.tec-it.com/barcode.ashx?data=' + ISBN
						+ '&code=Code128&dpi=96&dataseparator=');
	}
	function editBook(id) {
		var str = id.name;
		str = str.substring(3);
		var nam = document.getElementById('nam' + str).innerHTML;
		var cat = document.getElementById('cat' + str).innerHTML;
		var pri = document.getElementById('pri' + str).innerHTML;
		document.getElementById('category').value=cat;
		document.getElementById('price').value=pri;
		document.getElementById('eBID').value=str;
		document.getElementById('eBNameforUI').innerHTML = nam;
		document.getElementById('eBIDforUI').innerHTML = str;
	}
//page 4
//eSBf aSBf dSBf
function ajaxSubmit3(formName,servletName) {
$.ajax({
        type: "POST",//方法
        url: servletName,//表单接收url
        data: $(formName).serialize(),
        success: function () {
        	loadXMLDoc3();
        	alert("success!");
        },
        error : function() {
        	alert("fail!");
        }
    });
}
function loadXMLDoc3() {
		var xmlhttp;
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}

		xmlhttp.onreadystatechange = function() {

			if (xmlhttp.readyState == 1) {
                document.getElementById("search3").disabled=true;
				document.getElementById("search3").innerHTML = "please wait...";
			}

			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("search3").disabled=false;
				document.getElementById("search3").innerHTML = "Search";
				document.getElementById("showcopy").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("POST","http://localhost:8080/library/SearchCopy.do",true);
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		//将字符串发往后端
		xmlhttp.send("types3=" + document.getElementById("types3").value
				+ "&searchinfo3=" + document.getElementById("searchinfo3").value);
	}
	function gengrateBarcode2(txt) {
		var bookid = txt.innerHTML;
		bookid = bookid.replace(/-/g, "");
		var barCodePic = document.getElementById('barcode2');
		barCodePic.setAttribute("src",
				'https://barcode.tec-it.com/barcode.ashx?data=' + bookid
						+ '&code=Code128&dpi=96&dataseparator=');
	}

	function editSpecificBook(id) {
		var str = id.name;
		str = str.substring(3);
		var sta = document.getElementById('sta' + str).innerHTML;
		var sop = document.getElementById('Status').options;
		if (sta == 'borrowed')
			sop[0].selected = true;
		if (sta == 'available')
			sop[1].selected = true;
		document.getElementById('floor').value=floor;
		document.getElementById('shelf').value=shelf;		
		document.getElementById('eBookID').value=str;
		document.getElementById('eBookIDforUI').innerHTML = str;
	}

	function addSpecificBook(id) {
		var str = id.value;
		document.getElementById('aBID').value=str;
		document.getElementById('aBIDforUI').innerHTML = str;
	}

	function deleteSpecificBook(id) {
		var str = id.name;
		str = str.substring(3);
		document.getElementById('dBookID').value=str;
		document.getElementById('dBookIDforUI').innerHTML = str;
	}
//page5
function ajaxSubmit4(formName) {
		$.ajax({
			type : "POST",//方法
			url : "B_R.do",//表单接收url
			data : $(formName).serialize(),
			success : function() {
				loadXMLDoc4();
				alert("success!");
			},
			error : function() {
				alert("fail!");
			}
		});
	}
	function loadXMLDoc4() {
		var xmlhttp;
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}

		xmlhttp.onreadystatechange = function() {

			if (xmlhttp.readyState == 1) {
                document.getElementById("search4").disabled=true;
				document.getElementById("search4").innerHTML = "please wait...";
			}

			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("search4").disabled=false;
				document.getElementById("search4").innerHTML = "Search";
				document.getElementById("ShowBorrowList").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("POST", "http://localhost:8080/library/ShowBorrowList.do",
				true);
		xmlhttp.setRequestHeader("Content-type",
				"application/x-www-form-urlencoded");
		//将字符串发往后端
		xmlhttp.send("types4=" + document.getElementById("types4").value
				+ "&searchinfo4="
				+ document.getElementById("searchinfo4").value);
	}
	function returnBook(id) {
		var str = id.name;
		bookID = str.substring(3);
		rid=document.getElementById('rid'+bookID).innerHTML;
		document.getElementById('rBookID').value=bookID;
		document.getElementById('rBookIDforUI').innerHTML = bookID;
		document.getElementById('readerID4').value=rid;
	}
	function returnExpiredBook(id) {
		var str = id.name;
		fine = str.substring(32);
		bookID=str.substring(0,32);
		rid=document.getElementById('rid'+bookID).innerHTML;
		document.getElementById('fine').value=fine;
		document.getElementById('fineforUI').innerHTML=fine;
		document.getElementById('reBookID').value=bookID;
		document.getElementById('reBookIDforUI').innerHTML = bookID;
		document.getElementById('ereaderID4').value=rid;
	}
//page 6
function loadXMLDoc5() {
		var xmlhttp;
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}

		xmlhttp.onreadystatechange = function() {

			if (xmlhttp.readyState == 1) {
                document.getElementById("search5").disabled=true;
				document.getElementById("search5").innerHTML = "please wait...";
			}

			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("search5").disabled=false;
				document.getElementById("search5").innerHTML = "Search";
				document.getElementById("showincome").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("POST","http://localhost:8080/library/SearchIncome.do",true);
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		//将字符串发往后端
		xmlhttp.send("income=" + document.getElementById("income").value
				+ "&time=" + document.getElementById("time").value);
	}
//PAGE7
function ajaxSubmit5(formName,servletName) {
$.ajax({
        type: "POST",//方法
        url: servletName,//表单接收url
        data: $(formName).serialize(),
        success: function () {
        	alert("Update post success!");
        },
        error : function() {
        	alert("fail!");
        }
    });
}
</script>
<title>Librarian</title>
</head>
<body onLoad="loadXMLDoc();loadXMLDoc2();loadXMLDoc3();loadXMLDoc4();loadXMLDoc5();" style="margin-top:60px; background-image:url(img/background1.jpg)">
			<%
			Cookie[] cookies = request.getCookies();
			if(cookies == null) {
				response.sendRedirect("index.html");
				return;
			}
			int uid = 0; String email = "example@123.com"; String phoneNumber = "0";
			String currentCookie = null;
			for(int i = 0; i < cookies.length; i++){
				if(cookies[i].getName().equals("LoginInfo")){
					currentCookie = cookies[i].getValue();
					Connection con = BasicOperation.getConnection();
					uid = AdvancedOperation.getUidbyCookie(con, currentCookie);
					email = AdvancedOperation.getEmailByUid(con, uid);
					phoneNumber = AdvancedOperation.getPhoneNumberByUid(con, uid);
					if(uid == -1){
						response.sendRedirect("index.html");
						return;
					}
					con.close();
				}
			}
			%>
	<div class="container bs-docs-container" style="width: 100%;">
	<nav class="navbar navbar-default navbar-fixed-top" role="navigation " >  
   <div class="navbar-header">
      <b class="navbar-brand" style="padding-left: 30px;color: #428bca;" ><img src="img/logo.png" style="height:25px;padding-right: 10px;">Mandarin Library - Librarian Manage Page</b>   
	</div>
   <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav navbar-right" style="margin-right:30px;">
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" onMouseDown="$('.dropdown-toggle').dropdown();">
              <img src="img/user.jpg" class="img-circle" style="height:25px;">&nbsp;option<span class="caret"></span>
            </a> 
            <ul class="dropdown-menu">
			   <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Basic Information</li>
			   <li class="divider"></li>
               <li><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uid: <%=uid%></i></li>
               <li><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Email: <%=email%></i></li>
               <li><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Phone: <%=phoneNumber%></i></li>
               <li class="divider"></li>
               <li><a href="index.html">Logout</a></li>
            </ul>
         </li>
      </ul>
   </div></nav>
			<img src="img/library.jpg" class="img-responsive">
		<hr>
		<div class="row" style="width: 100%; margin: auto;">
<!-- Nav Bar -->
			<ul class="nav nav-stacked nav-pills col-md-2" id="PageTab">
				<li class="active"><a href="#div1" data-toggle="tab"
					onclick="$('#div2').css('display','none');$('#div3').css('display','none');$('#div4').css('display','none');$('#div6').css('display','none');$('#div5').css('display','none');$('#div7').css('display','none');$('#div8').css('display','none');$('#div1').css('display','');"
					aria-expanded="true"><i class="glyphicon glyphicon-home"></i>&nbsp;&nbsp;Main Page</a></li>
				<li class=""><a href="#div2" data-toggle="tab"
					onclick="$('#div1').css('display','none');$('#div3').css('display','none');$('#div4').css('display','none');$('#div6').css('display','none');$('#div5').css('display','none');$('#div7').css('display','none');$('#div8').css('display','none');$('#div2').css('display','');javascript:loadXMLDoc();"
					aria-expanded="false"><i class="glyphicon glyphicon-user"></i>&nbsp;&nbsp;Manage Reader</a></li>
				<li class=""><a href="#div3" data-toggle="tab"
					onclick="$('#div1').css('display','none');$('#div2').css('display','none');$('#div4').css('display','none');$('#div6').css('display','none');$('#div5').css('display','none');$('#div7').css('display','none');$('#div8').css('display','none');$('#div3').css('display','');javascript:loadXMLDoc2();"
					aria-expanded="false"><i class="glyphicon glyphicon-book"></i>&nbsp;&nbsp;Manage Book</a></li>
				<li class=""><a href="#div4" data-toggle="tab"
					onclick="$('#div1').css('display','none');$('#div2').css('display','none');$('#div3').css('display','none');$('#div6').css('display','none');$('#div5').css('display','none');$('#div7').css('display','none');$('#div8').css('display','none');$('#div4').css('display','');javascript:loadXMLDoc3();"
					aria-expanded="false"><i class="glyphicon glyphicon-bookmark"></i>&nbsp;&nbsp;Manage Specific Book</a></li>
				<li class=""><a href="#div5" data-toggle="tab"
					onclick="$('#div1').css('display','none');$('#div2').css('display','none');$('#div3').css('display','none');$('#div4').css('display','none');$('#div6').css('display','none');$('#div7').css('display','none');$('#div8').css('display','none');$('#div5').css('display','');javascript:loadXMLDoc4();"
					aria-expanded="false"><i class="glyphicon glyphicon-tags"></i>&nbsp;&nbsp;Lend/Return Book</a></li>
				<li class=""><a href="#div6" data-toggle="tab"
					onclick="$('#div1').css('display','none');$('#div2').css('display','none');$('#div3').css('display','none');$('#div4').css('display','none');$('#div5').css('display','none');$('#div7').css('display','none');$('#div8').css('display','none');$('#div6').css('display','');javascript:loadXMLDoc5();"
					aria-expanded="false"><i class="glyphicon glyphicon-usd"></i>&nbsp;&nbsp;Search Library Income</a></li>
				<li class=""><a href="#div7" data-toggle="tab"
					onclick="$('#div1').css('display','none');$('#div2').css('display','none');$('#div3').css('display','none');$('#div4').css('display','none');$('#div5').css('display','none');$('#div6').css('display','none');$('#div8').css('display','none');$('#div7').css('display','');"
					aria-expanded="false"><i class="glyphicon glyphicon-pencil"></i>&nbsp;&nbsp;Update Post</a></li>
					<li class=""><a href="#div8" data-toggle="tab"
					onclick="$('#div1').css('display','none');$('#div2').css('display','none');$('#div3').css('display','none');$('#div4').css('display','none');$('#div5').css('display','none');$('#div6').css('display','none');$('#div7').css('display','none');$('#div8').css('display','');"
					aria-expanded="false"><i class="glyphicon glyphicon-search"></i>&nbsp;&nbsp;Delete History</a></li>
				<li class=""><a href="index.html"><i class="glyphicon glyphicon-arrow-left"></i>&nbsp;&nbsp;Logout</a></li>
			</ul>
<!-- End Nav Bar -->

<!-- Tab Page -->

			<div class="col-md-10 well" role="main" >

<!-- PAGE1: Main Page-->
				<div class="tab-pane fade active in" id="div1"
					style="width:90%;margin: auto;">
				<div class="row" style="padding-left: 30px; font-size: 22px;">
				<div class="col-md-8">
				<h2><img src="img/user.jpg" class="img-circle" style="height:50px;">&nbsp;&nbsp;&nbsp;Welcome Librarian:</h2>
				<div style="padding-left: 80px;"><hr>Uid: <%=uid%> <hr>Email: <%=email%> <hr>PhoneNumber:
				<%=phoneNumber%> <hr></div>
				</div>
				<div class="col-md-4">
				<img src="img/img1.jpg" style="border:10px;padding-top: 20px;" class="img-responsive">
				</div>
				</div>
				</div>
<!-- END PAGE1 -->

<!-- PAGE2: Manage Reader -->
<div class="tab-pane fade" id="div2" style="display: none;">
	<!-- Search -->
		<div class="container" style="width: 100%;">
			<div class="row" style="margin: 0 auto">
				<div class="col-md-4 col-lg-4">
					<div class="input-group">
						<span class="input-group-addon">Search By:</span> <select
							name="types" id="types" required class="form-control">
							<option value="phoneNumber">phoneNumber</option>
							<option value="Email">Email</option>
							<option value="uid">uid</option>
						</select>
					</div>
				</div>
				<div class="col-xs-10 col-sm-10 col-md-6 col-lg-6">
					<input type="text" name="searchinfo" id="searchinfo"
						class="form-control" onKeyDown="pressEnter('search')">
				</div>
				<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
					<button type="submit" class="btn btn-success" id="search"
						onClick="loadXMLDoc()">Search</button>
				</div>
			</div>
		</div>
		<div class="container" style="width: 100%;">
			<table class="table table-striped" style="background-color:transparent">
				<thead>
					<tr>
						<th>uid</th>
						<th>Email</th>
						<th>phoneNumber</th>
						<th>operation</th>
					</tr>
				</thead>
				<tbody id="showreader">
				</tbody>
			</table>
			<a href='' data-toggle='modal' data-target='#addReader'
				style="float: right; text-align: right;">I want to add Reader</a>
		</div>
		<!-- ./Search -->

		<!-- Page 1 Function 1: editReader -->

		<!-- modal -->
		<div class="modal fade" id="editReader" tabindex="-1" role="dialog"
			aria-labelledby="editReader" aria-hidden="true"
			style="display: none;">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span><span class="sr-only">Close</span>
						</button>
						<h4 class="modal-title">Edit Reader info</h4>
					</div>
					<div class="modal-body">
						<div class="alert alert-success">
							<p>
								UID:<strong id="eUIDforUI">undefined</strong>
							</p>
						</div>
						<form name="eRf">
							<input name='Type' value='1' hidden='' /> <input id='eUID'
								name='eUID' value='' hidden='' />
							<div class="input-group">
								<span class="input-group-addon">E-mail:</span> <input
									type="text" class="form-control" name="Email" id="Email"
									required onKeyDown="pressEnter('ERconfirm')">
							</div>
							<br>
							<div class="input-group">
								<span class="input-group-addon">PhoneNumber:</span> <input
									type="text" class="form-control" name="PhoneNumber"
									id="PhoneNumber" required onKeyDown="pressEnter('ERconfirm')">
							</div>
							<br>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
						<button type="submit" class="btn btn-success" data-dismiss="modal"
							onclick="submitCheck('Email','PhoneNumber',eRf,'Reader');" id="ERconfirm">Confirm</button>
					</div>

				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->

		<!-- Page 1 Function 2: addReader -->

		<!-- modal -->
		<div class="modal fade" id="addReader" tabindex="-1" role="dialog"
			aria-labelledby="addReader" aria-hidden="true" style="display: none;">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span><span class="sr-only">Close</span>
						</button>
						<h4 class="modal-title">Add Reader</h4>
					</div>
					<div class="modal-body">
						<div class="alert alert-warning">
							<p>Add a new Reader:</p>
						</div>
						<form name="aRf">
							<input name='Type' value='2' hidden='' />
							<div class="input-group">
								<span class="input-group-addon">E-mail:</span> <input
									type="text" class="form-control" name="Email" required
									onKeyDown="pressEnter('ARconfirm')" id="Email2">
							</div>
							<br>
							<div class="input-group">
								<span class="input-group-addon">PhoneNumber:</span> <input
									type="text" class="form-control" name="PhoneNumber" required
									onKeyDown="pressEnter('ARconfirm')" id="PhoneNumber2">
							</div>
							<br>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
						<button type="submit" class="btn btn-success" data-dismiss="modal"
							onclick="submitCheck('Email2','PhoneNumber2',aRf,'Reader');" id="ARconfirm">Confirm</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->

		<!-- Page 1 Function 3: deleteReader -->

		<!-- modal -->
		<div class="modal fade" id="deleteReader" tabindex="-1" role="dialog"
			aria-labelledby="deleteReader" aria-hidden="true"
			style="display: none;">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span><span class="sr-only">Close</span>
						</button>
						<h4 class="modal-title">Delete Reader</h4>
					</div>
					<div class="modal-body">
						<div class="alert alert-warning">
							<p>Are you sure to delete this Reader ?</p>
						</div>
						<div class="alert alert-success">
							<p>
								UID:<strong id="dUIDforUI">undefined</strong>
							</p>
						</div>
						<form name="dRf">
							<input name='Type' value='3' hidden='' /> <input id='dUID'
								name='dUID' value='' hidden='' /> <br>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
						<button type="submit" class="btn btn-success" data-dismiss="modal"
							onclick="ajaxSubmit(dRf,'Reader');">Confirm</button>
					</div>

				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
		
		<!-- Page 1 Function 4: displayinfo -->

		<!-- modal -->
		<div class="modal fade" id="displayinfo" tabindex="-1" role="dialog"
			aria-labelledby="displayinfo" aria-hidden="true"
			style="display: none;" >
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span><span class="sr-only">Close</span>
						</button>
						<h4 class="modal-title">Reader Info</h4>
					</div>
					<div class="modal-body">
						<div class="alert alert-success" id=info>
							Nothing to show here.
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
					</div>

				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
		
</div>

<!-- END PAGE2 -->

<!-- PAGE3: Manage Book -->
<div class="tab-pane fade" id="div3" style="display: none;">
	<!-- Search2 -->
	<div class="container" style="width:100%;">
		<div class="row" style="margin: 0 auto">
			<div class="col-md-4 col-lg-4">
				<div class="input-group">
					<span class="input-group-addon">Search By:</span> <select
						name="types2" id="types2" required class="form-control">
						<option value="name">name</option>
						<option value="bid">bid</option>
						<option value="ISBN">ISBN</option>
					</select>
				</div>
			</div>
			<div class="col-xs-10 col-sm-10 col-md-6 col-lg-6">
				<input type="text" name="searchinfo2" id="searchinfo2" class="form-control" onKeyDown="pressEnter('search2')">
			</div>
			<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
				<button type="submit" class="btn btn-success" id="search2" onClick="loadXMLDoc2()">Search</button>
			</div>
		</div>
	</div>
	<div class="container" style="width:100%;">
		<table class="table table-striped">
			<thead>
				<tr>
					<th>bid</th>
					<th>name</th>
					<th>category</th>
					<th>author</th>
					<th>publisher</th>
					<th>ISBN</th>
					<th>price</th>
					<th>operation</th>
				</tr>
			</thead>
			<tbody id="showbook">	
			</tbody>
		</table>
		<a href='' data-toggle='modal' data-target='#addBook'
			style="float: right; text-align: right;">I want to add Book
			without ISBN</a> <strong style="float: right;">&nbsp;&nbsp;/&nbsp;&nbsp;</strong>
		<a href='' data-toggle='modal' data-target='#addBookbyapi'
			style="float: right; text-align: right;">I want to add Book by
			ISBN</a>
	</div>
	<!-- ./Search2 -->

<!-- Page 3 Function 1: addBookbyapi -->

	<!-- modal -->
	<div class="modal fade" id="addBookbyapi" tabindex="-1" role="dialog"
		aria-labelledby="addBookbyapi" aria-hidden="true"
		style="display: none;">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">Add Book By ISBN API</h4>
				</div>
				<div class="modal-body">
					<form name="aBbaf">
						<div class="alert alert-success">
							<p>Please input ISBN (you can find it on the cover of
								your book)</p>
						</div>
						<div class="input-group">
							<span class="input-group-addon">ISBN</span> <input type="text"
								class="form-control" name="apiISBN" required onKeyDown="pressEnter('ABconfirm')" id="abba">
						</div>
						<br>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
					<button type="submit" class="btn btn-success" data-dismiss="modal"
						onclick="submitCheckNull2(aBbaf,'ISBN');" id="ABconfirm">Confirm</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->

<!-- Page 3 Function 2: addBook -->

	<!-- modal -->
	<div class="modal fade" id="addBook" tabindex="-1" role="dialog"
		aria-labelledby="addBook" aria-hidden="true" style="display: none;">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">Add Book</h4>
				</div>
				<div class="modal-body">
					<div class="alert alert-warning">
						<p>You are adding a new Book without ISBN !</p>
					</div>
					<form name="aBf">
						<input name='Type2' value='1' hidden='' />
						<div class="input-group">
							<span class="input-group-addon">Name:</span> <input type="text"
								class="form-control abwi" name="Name" required onKeyDown="pressEnter('ABconfirm2')" id="abwi1">
						</div>
						<br>
						<div class="input-group">
							<span class="input-group-addon">Category:</span> <input
								type="text" class="form-control abwi" name="Category" required onKeyDown="pressEnter('ABconfirm2')" id="abwi2">
						</div>
						<br>
						<div class="input-group">
							<span class="input-group-addon">Author:</span> <input type="text"
								class="form-control abwi" name="Author" required onKeyDown="pressEnter('ABconfirm2')" id="abwi3">
						</div>
						<br>
						<div class="input-group">
							<span class="input-group-addon">Publisher:</span> <input
								type="text" class="form-control abwi" name="Publisher" required onKeyDown="pressEnter('ABconfirm2')" id="abwi4">
						</div>
						<br>
						<div class="input-group">
							<span class="input-group-addon">Price:</span> <input
								type="number" class="form-control abwi" name="Price" required onKeyDown="pressEnter('ABconfirm2')" id="abwi5">
						</div>
						<br>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
					<button type="submit" class="btn btn-success" data-dismiss="modal"
						onclick="submitCheckNull3(aBf,'Book');" id="ABconfirm2">Confirm</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->

<!-- Page 3 Function 3: editBook -->

	<!-- modal -->
	<div class="modal fade" id="editBook" tabindex="-1" role="dialog"
		aria-labelledby="editBook" aria-hidden="true" style="display: none;">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">Edit Book</h4>
				</div>
				<div class="modal-body">
					<div class="alert alert-success">
						<p>
							BID:<strong id="eBIDforUI">undefined</strong> <br> BookName:<strong
								id="eBNameforUI">undefined</strong>
						</p>
					</div>
					<form name="eBf">
						<input name='Type2' value='2' hidden='' /> <input id='eBID'
							name='eBID' value='' hidden='' />
						<div class="input-group">
							<span class="input-group-addon">Set new category:</span> <input
								type="text" class="form-control eb" name="category" id="category"
								required onKeyDown="pressEnter('EBconfirm')">
						</div>
						<div class="input-group">
							<span class="input-group-addon">Set new price:</span> <input
								type="number" class="form-control eb" name="price" id="price"
								required onKeyDown="pressEnter('EBconfirm')">
						</div>
						<br>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
					<button type="submit" class="btn btn-success" data-dismiss="modal"
						onclick="submitCheckNull4(eBf,'Book');" id="EBconfirm">Confirm</button>
				</div>

			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
	
<!-- Page 3 Function 4: codePanel -->

	<!-- modal -->
	<div class="modal fade in" id="codePanel" tabindex="-1" role="dialog"
		aria-labelledby="codePanel" aria-hidden="true" style="display: none;">
		<!-- modal-dialog -->
		<div class="modal-dialog">
			<!-- modal-content -->
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">BarCode</h4>
				</div>
				<div class="modal-body" align="center">
					<img
						src="https://barcode.tec-it.com/barcode.ashx?data=InputYourTextInHere&amp;code=Code128&amp;dpi=96&amp;dataseparator="
						id="barcode">
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-success" data-dismiss="modal">Confirm</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
	
</div>

<!-- END PAGE3 -->

<!-- PAGE4: Manage Specific Book -->
<div class="tab-pane fade" id="div4" style="display: none;">
	<!-- Search3 -->
	<div class="container" style="width:100%;">
			<div class="row" style="margin: 0 auto">
				<div class="col-md-4 col-lg-4">
					<div class="input-group">
						<span class="input-group-addon">Search By:</span> <select
							name="types3" id="types3" required class="form-control">
							<option value="status">status</option>
							<option value="bookID">bookID</option>
							<option value="bid">bid</option>
						</select>
					</div>
				</div>
				<div class="col-xs-10 col-sm-10 col-md-6 col-lg-6">
					<input type="text" name="searchinfo3" id="searchinfo3" class="form-control" onKeyDown="pressEnter('search3')">
				</div>
				<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
					<button type="submit" class="btn btn-success" id="search3" onClick="loadXMLDoc3()">Search</button>
				</div>
			</div>
	</div>
	<div class="container" style="width:100%;">
		<table class="table table-striped">
			<thead>
				<tr>
					<th>bid</th>
					<th>bookID</th>
					<th>location</th>
					<th>status</th>
					<th>operation</th>
				</tr>
			</thead>
			<tbody id="showcopy">
			</tbody>
		</table>
		<a href='' data-toggle='modal' data-target='#addSpecificBook'
			style="float: right; text-align: right;">I want to
			addSpecificBook</a>
	</div>
	<!-- ./Search3 -->

<!-- Page 4 Function 1: codePanel2 -->

	<!-- modal -->
	<div class="modal fade" id="codePanel2" tabindex="-1" role="dialog"
		aria-labelledby="codePanel" aria-hidden="true" style="display: none;">
		<!-- modal-dialog -->
		<div class="modal-dialog">
			<!-- modal-content -->
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">BarCode</h4>
				</div>
				<div class="modal-body" align="center">
					<img
						src="https://barcode.tec-it.com/barcode.ashx?data=InputYourTextInHere&amp;code=Code128&amp;dpi=96&amp;dataseparator="
						width='100%' id="barcode2">
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-success" data-dismiss="modal">Confirm</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->

<!-- Page 4 Function 2: editSpecificBook -->

	<!-- modal -->
	<div class="modal fade" id="editSpecificBook" tabindex="-1"
		role="dialog" aria-labelledby="editSpecificBook" aria-hidden="true"
		style="display: none;">
		<!-- modal-dialog -->
		<div class="modal-dialog">
			<!-- modal-content -->
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">Edit Specific Book</h4>
				</div>
				<div class="modal-body">
					<div class="alert alert-success">
						<p>
							BookID:<strong id="eBookIDforUI">undefined</strong>
						</p>
					</div>
					<form name="eSBf">
						<input name='Type2' value='4' hidden='' /> <input id='eBookID'
							name='eBookID' value='' hidden='' />
						<div class="input-group">
							<span class="input-group-addon">Status</span> <select
								name="Status" id="Status" required class="form-control">
								<option value="borrowed">borrowed</option>
								<option value="available">available</option>
							</select>
						</div>
						<br>
						<div class="input-group">
							<span class="input-group-addon">Location</span>
							<select name="floor" id="floor" required class="form-control">
								<option value="1F">1F</option>
								<option value="2F">2F</option>
								<option value="3F">3F</option>
							</select>
							<select name="shelf" id="shelf" required class="form-control">
								<option value="Shelf1">Shelf1</option>
								<option value="Shelf2">Shelf2</option>
								<option value="Shelf3">Shelf3</option>
							</select>
						</div>
						<br>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
					<button type="submit" class="btn btn-success" data-dismiss="modal"
						onclick="ajaxSubmit3(eSBf,'Book');" id="ESBconfirm">Confirm</button>
				</div>

			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->

<!-- Page 4 Function 3: addSpecificBook -->

	<!-- modal -->
	<div class="modal fade" id="addSpecificBook" tabindex="-1"
		role="dialog" aria-labelledby="addSpecificBook" aria-hidden="true"
		style="display: none;">
		<!-- modal-dialog -->
		<div class="modal-dialog">
			<!-- modal-content -->
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">Add Specific Book</h4>
				</div>
				<div class="modal-body">
					<div class="alert alert-warning">
						<p>
							You are adding more Book information
						</p>
					</div>
					<form name="aSBf">
						<input name='Type2' value='3' hidden='' /> <input id='aBID'
							name='aBID' value='' hidden='' />
						<div class="input-group">
							<span class="input-group-addon">bid</span> <input type="number"
								class="form-control" name="bid" onBlur="addSpecificBook(this)"
								required onKeyDown="pressEnter('ASBconfirm')" id="asb1">
						</div>
						<br>
						<div class="input-group">
							<span class="input-group-addon">Number</span> <input
								type="number" class="form-control" name="Number" required onKeyDown="pressEnter('ASBconfirm')" id="asb2">
						</div>
						<br>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
					<button type="submit" class="btn btn-success" data-dismiss="modal"
						onclick="submitCheckNull5(aSBf,'Book');" id="ASBconfirm">Confirm</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->

<!-- Page 4 Function 4: deleteSpecificBook -->

	<!-- modal -->
	<div class="modal fade" id="deleteSpecificBook" tabindex="-1"
		role="dialog" aria-labelledby="deleteSpecificBook" aria-hidden="true"
		style="display: none;">
		<!-- modal-dialog -->
		<div class="modal-dialog">
			<!-- modal-content -->
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">Delete Specific Book</h4>
				</div>
				<div class="modal-body">
					<div class="alert alert-success">
						<p>
							BookID:<strong id="dBookIDforUI">undefined</strong>
						</p>
					</div>
					<form name="dSBf">
						<input name='Type2' value='5' hidden='' /> <input id='dBookID'
							name='dBookID' value='' hidden='' />
						<div class="input-group">
							<span class="input-group-addon">Delete Reason:</span> <input
								type="text" class="form-control dr" name="reason" required onKeyDown="pressEnter('DSBconfirm')">
						</div>
						<br>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
					<button type="submit" class="btn btn-success" data-dismiss="modal"
						onclick="ajaxSubmit3(dSBf,'Book');" id="DSBconfirm">Confirm</button>
				</div>

			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
	
</div>

<!-- END PAGE4 -->

<!-- PAGE5: Lend/Return Book -->
<div class="tab-pane fade" id="div5" style="display: none;">	
	<!-- Search4 -->	
		<div class="container" style="width: 100%;">
			<div class="row" style="margin: 0 auto">
				<div class="col-md-4 col-lg-4">
					<div class="input-group">
						<span class="input-group-addon">Search By:</span> <select
							name="types4" id="types4" required class="form-control">
							<option value="bid">bid</option>
							<option value="uid">uid</option>
							<option value="bookID">bookID</option>
						</select>
					</div>
				</div>
				<div class="col-xs-10 col-sm-10 col-md-6 col-lg-6">
					<input type="text" name="searchinfo4" id="searchinfo4"
						class="form-control" onKeyDown="pressEnter('search4')">
				</div>
				<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
					<button type="submit" class="btn btn-success" id="search4"
						onclick="loadXMLDoc4()">Search</button>
				</div>
			</div>
		</div>
		<div class="container">
			<table class="table table-striped">
				<thead>
					<tr>
						<th>uid</th>
						<th>bid</th>
						<th>bookID</th>
						<th>borrowDate</th>
						<th>status</th>
					</tr>
				</thead>
				<tbody id="ShowBorrowList">
				</tbody>
			</table>
			<a href='' data-toggle='modal' data-target='#lendBook'
				style="float: right; text-align: right;">Lend a book</a>
		</div>
	<!-- ./Search4 -->

<!-- Page 5 Function 1: returnBook -->

		<!-- modal -->
		<div class="modal fade" id="returnBook" tabindex="-1"
			role="dialog" aria-labelledby="returnBook" aria-hidden="true"
			style="display: none;">
			<!-- modal-dialog -->
			<div class="modal-dialog">
				<!-- modal-content -->
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span><span class="sr-only">Close</span>
						</button>
						<h4 class="modal-title">Return A Book</h4>
					</div>
					<div class="modal-body">
						<div class="alert alert-success">
							<p>
								Are you sure to return the book<br>whose BookID is:<strong id="rBookIDforUI">undefined</strong>.
							</p>
						</div>
						<form name="rSBf">
							<input name='Type3' value='1' hidden='' /> <input id='rBookID'
								name='rBookID' value='' hidden='' /><input id='readerID4'
								name='readerID4' value='' hidden='' />
							<br>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
						<button type="submit" class="btn btn-success" data-dismiss="modal"
							onclick="ajaxSubmit4(rSBf);">Confirm</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
		
<!-- Page 5 Function 2: returnExpiredBook -->
		
		<!-- modal -->
		<div class="modal fade" id="returnExpiredBook" tabindex="-1"
			role="dialog" aria-labelledby="returnExpiredBook" aria-hidden="true"
			style="display: none;">
			<!-- modal-dialog -->
			<div class="modal-dialog">
				<!-- modal-content -->
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span><span class="sr-only">Close</span>
						</button>
						<h4 class="modal-title">Pay Fine</h4>
					</div>
					<div class="modal-body">
						<div class="alert alert-success">
							<p>
								You are returning the book<br>whose BookID is:<strong id="reBookIDforUI">undefined</strong>.
								<br>The fine is <strong id="fineforUI"></strong> yuan.
							</p>
						</div>
						<form name="reSBf">
							<input name='Type3' value='1' hidden='' /> <input id='reBookID'
								name='rBookID' value='' hidden='' /> <input id='fine'
								name='fine' value='' hidden='' /><input id='ereaderID4'
								name='readerID4' value='' hidden='' />
							<br>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
						<button type="submit" class="btn btn-success" data-dismiss="modal"
							onclick="ajaxSubmit4(reSBf);">Confirm</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
		
<!-- Page 5 Function 3: lendBook -->

		<!-- modal -->
		<div class="modal fade" id="lendBook" tabindex="-1"
			role="dialog" aria-labelledby="lendBook" aria-hidden="true"
			style="display: none;">
			<!-- modal-dialog -->
			<div class="modal-dialog">
				<!-- modal-content -->
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">×</span><span class="sr-only">Close</span>
						</button>
						<h4 class="modal-title">Lend A Book</h4>
					</div>
					<div class="modal-body">
						<div class="alert alert-warning">
							<p>
								You are going to lend a book:
							</p>
						</div>
						<form name="lSBf">
							<input name='Type3' value='2' hidden='' />
						<div class="input-group">
							<span class="input-group-addon">ReaderID:</span> <input type="number"
								class="form-control" name="ReaderID" required onKeyDown="pressEnter('LBconfirm')">
						</div>
						<br>
						<div class="input-group">
							<span class="input-group-addon">BookID:</span> <input
								type="text" class="form-control" name="BookID" required onKeyDown="pressEnter('LBconfirm')">
						</div>
						<br>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
						<button type="submit" class="btn btn-success" data-dismiss="modal"
							onclick="ajaxSubmit4(lSBf);" id="LBconfirm">Confirm</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
	</div>
	
<!-- END PAGE5 -->

<!-- PAGE6: Search Library Income -->
<div class="tab-pane fade" id="div6" style="display: none;">
	<div class="container" style="width:100%;">
		<div class="row" style="padding-left: 30px;">
			<div class="col-md-3 col-lg-3">
				Income Type:
				<select name="income" id="income" required class="form-control" style="width:100%;">
					<option value="Total">Total</option>
					<option value="Deposit">Deposit</option>
					<option value="Fine">Fine</option>
				</select>
			</div>
			<div class="col-xs-4 col-sm-4 col-md-3 col-lg-3">
				Group By:
				<select name="time" id="time" required class="form-control" style="width:100%;">
					<option value="Daily">Daily</option>
					<option value="Weekly">Weekly</option>
					<option value="Monthly">Monthly</option>
				</select>
			</div>
			<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
				<br>
				<button type="submit" class="btn btn-success" id="search5" onClick="loadXMLDoc5()">Search</button>
			</div>
		</div>
		<div class="container" style="width:100%;">
			<table class="table table-striped">
				<thead>
					<tr>
						<th>Time Range</th>
						<th>Income</th>
					</tr>
				</thead>
				<tbody id="showincome">	
				</tbody>
			</table>
		</div>
	</div>
</div>
<!-- END PAGE6 -->
<!-- START PAGE7 -->
<div class="tab-pane fade" id="div7" style="display: none;">
	<br>
		<div class="container" style="width:100%;">
		<form id="post">
			<h4>Title</h4>
			<input type="text" id="title" name="title" style="width:100%;">
			<br>
			<h4>Content</h4>
			<textarea id="content" name="content" style="width:100%; height:250px;" ></textarea>
		</form>
		<br>
			<button type="submit" class="btn btn-success" data-dismiss="modal"
							onclick="ajaxSubmit5(post,'UpdatePost');" id="UPconfirm">Confirm</button>
		</div>
</div>
<!-- END PAGE7 -->
<!-- START PAGE7 -->
<div class="tab-pane fade" id="div8" style="display: none;">
	<!-- Search -->
	<div class="container" style="width: 100%;">
		<%@page import="dbOperator.*,java.sql.*"%>
		<table class="table table-striped">
			<thead>
				<tr>
					<th>uid</th>
					<th>bid</th>
					<th>bookID</th>
					<th>date</th>
					<th>reason</th>
				</tr>
			</thead>
			<tbody>
				<%
					Connection con = BasicOperation.getConnection();
					ResultSet rs = AdvancedOperation.getDeleteList(con);
					while (rs.next()) {
				%>
				<tr>
					<%
							int i = 1;
							while (i <= 5) {
								out.println("<td>" + rs.getString(i) + "</td>");
								i++;
							}
					%>
				</tr>
				<%
					}
					con.close();
				%>
			</tbody>
		</table>
	</div>
	<!-- ./Search -->
</div>
<!-- END PAGE8 -->
			</div>
<!-- End Tab Page -->
		</div>
	</div>
</body>